import * as Collapsible from "@radix-ui/react-collapsible";
import * as Checkbox from "@radix-ui/react-checkbox";
import { CheckIcon } from "@radix-ui/react-icons";

import { motion, AnimatePresence } from "framer-motion";
import { ReactNode, useState } from "react";
import { useTranslations } from "next-intl";
type IProps = {
  searchData: any;
  setSearchData: (value: any) => void;
  config: { key: string; i18n: any[]; title: string }[];
  children?: ReactNode;
  title: string;
};
export default function CustomCollapsible(props: IProps) {
  const [openMenu, setOpenMenu] = useState<string[]>([]);
  const t = useTranslations("product");
  // 处理单选框的选择
  function handleCheckboxChange(
    checked: Checkbox.CheckedState,
    value: string,
    item: any
  ) {
    if (checked) {
      props.setSearchData({
        ...props.searchData,
        [item.key]: value
      })
    } else {
      delete props.searchData[item.key]
      props.setSearchData({...props.searchData})
    }
  }
  // 处理选择框的打开与关闭
  function handleOpenCollapisble(v: boolean, item: any) {
    if (v) {
      const menu = openMenu.find((meun) => meun === item.key); // 打开 ！
      !menu && setOpenMenu([...openMenu, item.key]);
    } else {
      setOpenMenu([...openMenu.filter((meun) => meun != item.key)]);
    }
  }
  return (
    <>
      {props.config.map((item) => {
        return (
          <Collapsible.Root
            key={item.title}
            onOpenChange={(v) => handleOpenCollapisble(v, item)}
          >
            <Collapsible.Trigger className="w-full flex items-center p-4 border-b">
              <h1 className="flex-1 text-left">{t(item.title)}</h1>
              <svg
                className={`transition-all ${
                  openMenu.find((menu) => menu === item.key)
                    ? "rotate-180"
                    : "rotate-0"
                }`}
                width="20"
                height="20"
                viewBox="0 0 15 15"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
                  fill="currentColor"
                  fillRule="evenodd"
                  clipRule="evenodd"
                ></path>
              </svg>
            </Collapsible.Trigger>
            <AnimatePresence>
              {openMenu.find((menu) => item.key === menu) && (
                <Collapsible.Content forceMount>
                  <motion.div
                    className="bg-white overflow-auto cursor-pointer backdrop-blur-sm rounded shadow mb-1"
                    initial={{ height: 0 }}
                    animate={{ height: "auto" }}
                    exit={{ height: 0 }}
                  >
                    <ul className={"w-full h-full "}>
                      {item.i18n.map((itemy, index) => {
                        return (
                          <li
                            key={itemy}
                            className="hover-bottom-line  border-b"
                          >
                            <div className="px-4 flex items-center pl-8">
                              <Checkbox.Root
                                onCheckedChange={(checked) =>
                                  handleCheckboxChange(checked, t(itemy), item)
                                }
                                checked={props.searchData[item.key] === t(itemy)}
                                className="flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-[4px] bg-white border-2 outline-none"
                                id={itemy}
                              >
                                <Checkbox.Indicator>
                                  <CheckIcon></CheckIcon>
                                </Checkbox.Indicator>
                              </Checkbox.Root>
                              <label
                                className="flex-1 block pl-[10px] py-3 text-[15px] leading-none"
                                htmlFor={itemy}
                              >
                                {t(itemy)}
                              </label>
                            </div>
                          </li>
                        );
                      })}
                    </ul>
                  </motion.div>
                </Collapsible.Content>
              )}
            </AnimatePresence>
          </Collapsible.Root>
        );
      })}
    </>
  );
}
